import React, { useState, useEffect } from 'react';
import ReduceDemo from './ReduceDemo';
import { Button } from 'antd';

export default function HookDemo() {
  // 声明一个叫 “count” 的 state 变量
  const [count, setCount] = useState(0);
  const [age, setAge] = useState(12);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([
    { text: 'Hello, hooks' },
    { text: 'Hello, Zhang' },
  ]);

  // 相当于 componentDidMount 和 componentDidUpdate
  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `You click ${count} times`;
  });

  return (
    <div className="p-4">
      <p>You clicked {count} times</p>
      <Button onClick={() => setCount(count + 1)}>Click Me</Button>
      <br />
      <br />
      <p>Age: {age}</p>
      <p>fruit: {fruit}</p>
      <ul>
        {todos.map((item: any, index) => {
          return <li key={index}>{item.text}</li>;
        })}
      </ul>
      <ReduceDemo></ReduceDemo>
    </div>
  );
}
